import React, { useState } from 'react';
import { useAntdTable } from 'ahooks';
import {
  Button,
  Card,
  DatePicker,
  Form,
  Input,
  Row,
  Select,
  Space,
  Table,
  Popconfirm,
  Pagination,
  Cascader,
} from 'antd';
import styles from '@/components/common/PateoTable/TableList.less';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { fetchData, fetchFileUrl } from '@/services/userFeedback/abnormalLog';
import useOptions from '../hooks/useOptions';

export default () => {
  const [form] = Form.useForm();
  const { brand, series, version, onChange, filter } = useOptions(form);
  const [expand, setExpand] = useState(false);

  const { search, tableProps, pagination } = useAntdTable(fetchData, {
    form,
  });
  const { submit, reset } = search;

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      render: (text: any, record: any, index: any) => {
        return index + 1 + (pagination.current - 1) * pagination.pageSize;
      },
    },
    {
      title: 'VIN',
      dataIndex: 'vin',
    },
    {
      title: 'PDSN',
      dataIndex: 'pdsn',
    },
    {
      title: '品牌',
      dataIndex: 'brandName',
    },
    {
      title: '车型',
      dataIndex: 'vehicleType',
    },
    {
      title: '版本',
      dataIndex: 'version',
    },
    {
      title: '上传时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: '操作',
      width: 60,
      render: (text: string, _) =>
        _.fileUuid && (
          <Popconfirm title="是否确认下载" onConfirm={() => fetchFileUrl(_.fileUuid)}>
            <a href={text}>下载</a>
          </Popconfirm>
        ),
    },
  ];

  return (
    <div>
      <Card bordered={false}>
        <Form form={form} layout="inline">
          <Row wrap style={{ width: '100%', gap: 12 }}>
            <Form.Item label="VIN码" name="vin">
              <Input maxLength={17} placeholder="请输入VIN码" allowClear />
            </Form.Item>
            <Form.Item label="PDSN" name="pdsn">
              <Input placeholder="请输入PDSN" allowClear />
            </Form.Item>
            <Form.Item label="版本" name="version">
              <Select showSearch allowClear placeholder="请选择版本" style={{ width: 182 }}>
                {version?.map((item: any) => (
                  <Select.Option key={item} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            {expand && (
              <>
                <Form.Item label="品牌" name="brandCode">
                  <Select
                    onChange={v => onChange(v)}
                    showSearch
                    allowClear
                    placeholder="请选择品牌"
                    style={{ width: 182 }}
                  >
                    {brand?.map((item: any) => (
                      <Select.Option key={item.brandCode} value={item.brandCode}>
                        {item.brandName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item label="车型" name="vehicleType">
                  <Cascader
                    showSearch={{ filter }}
                    options={series}
                    style={{ minWidth: 182 }}
                    placeholder="请选择车型"
                  />
                </Form.Item>
                <Form.Item label="上传时间" name="rangeTime">
                  <DatePicker.RangePicker format="YYYY-MM-DD" />
                </Form.Item>
              </>
            )}
            <Space size={12} style={{ marginLeft: 'auto' }}>
              <Button type="primary" onClick={submit} htmlType="submit" size="small">
                查询
              </Button>
              <Button htmlType="button" onClick={reset} size="small">
                重置
              </Button>
              <a
                style={{ fontSize: 12 }}
                onClick={() => {
                  setExpand(!expand);
                }}
              >
                {expand ? <UpOutlined /> : <DownOutlined />}
                {expand ? '收起' : '展开'}
              </a>
            </Space>
          </Row>
        </Form>
      </Card>
      <Card className={styles.standardTable}>
        <Table
          style={{ marginTop: 12 }}
          size={'small'}
          rowKey="id"
          columns={columns}
          scroll={{ x: 'max-content' }}
          {...tableProps}
          pagination={false}
        />
        <Row justify="end" style={{ padding: '12px 0' }}>
          <Pagination
            // hideOnSinglePage
            showSizeChanger
            size="small"
            showQuickJumper
            {...pagination}
            showTotal={() => <span>共&nbsp;{pagination.total}&nbsp;条</span>}
            pageSizeOptions={['10', '20', '50', '100']}
          />
        </Row>
      </Card>
    </div>
  );
};
